<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MyPetstore</title>
</head>
<body>
<div th:replace="common/top"></div>
<div id="BackLink">
    <a href="/catalog/view" class>Return to Main Menu</a>
</div>
<div id="Content">
    <div id="Catalog">
        <div id="Cart">
            <h2>Shopping Cart</h2>
            <script type="text/javascript" src="../js/UpdateCart.js"></script>

            <p><font color="red" th:text="${msg}">SRY</font></p>

            <form id="cartForm">
                <table class="rwd-table" id="cart-table">
                    <tr class="trHead">
                        <th><b>Item ID</b></th>
                        <th><b>Product ID</b></th>
                        <th><b>Description</b></th>
                        <th><b>In Stock?</b></th>
                        <th><b>Quantity</b></th>
                        <th><b>List Price</b></th>
                        <th><b>Total Cost</b></th>
                        <th>&nbsp;</th>
                    </tr>


                    <tr th:if="${session.cart?.getNumberOfItems()} == 0">
                        <td colspan="8"><b>Your cart is empty.</b></td>
                    </tr>

                    <script>
                        /*To get the mouse becoming the shape of a finger when hovering over <a class="btn">*/
                        jQuery(document).ready(
                            function (){
                                $('#cartForm a.btn').click(
                                    function ( event ){
                                        event.preventDefault();
                                    }
                                );
                            }
                        );

                    </script>


                        <tr th:each="cartItem:${session.cart?.cartItems}" th:itemid="${cartItem.item.itemId}">
                            <td>
                                <a th:href="@{/catalog/viewItem(itemId=${cartItem.item.itemId})}">
                                    <span th:text="${cartItem.item.itemId}"></span>
                                </a>
                            </td>
                            <td th:text="${cartItem.item.product.productId}"></td>
                            <td th:text="${cartItem.item.attribute1} + ' ' + ${cartItem.item.product.name}"></td>
                            <td th:text="${cartItem.inStock}"></td>
                            <td>
                                <input type="text" th:name="${cartItem.item.itemId}" th:value="${cartItem.cartQuantity}" onchange="updateCartRequest()" />
                            </td>
    <!--                        <td>-->
    <!--                            <fmt:formatNumber value="${cartItem.item.listPrice}" pattern="$#,##0.00" />-->
    <!--                        </td>-->
                            <td th:text="'$' + ${cartItem.item.listPrice}" th:id="'listPrice-'+${cartItem.item.itemId}"></td>
                            <td th:text="'$' + ${cartItem.total}" th:id="'totalPrice-'+${cartItem.item.itemId}"></td>
    <!--                        <td>-->
    <!--                            <fmt:formatNumber value="" pattern="$#,##0.00" />-->
    <!--                        </td>-->
                            <td>
<!--                                <a th:onclick="removeCartItemRequest('${cartItem.item.itemId}')" rel="external nofollow" href="javascript:void(0);" class="btn">Remove</a>-->
                                <a th:data-id="${cartItem.item.itemId}" onclick="removeCartItemRequest(this.getAttribute('data-id'));" class="btn">Remove</a>
                            </td>
                        </tr>

                    <tr>
                        <td colspan="7">
                            <a onclick="updateCartRequest()" href="#" value="Update Cart" class="btn">Update Cart</a>
                        </td>
                        <td>&nbsp;</td>
                    </tr>
                </table>
            </form>

            <div id="to-check-out">

            </div>
    <!--        <c:if test="}">-->
    <!--            <c:if test="${sessionScope.account != null }">-->
    <!--                <c:if test="${sessionScope.account.authenticated}">-->
    <!--                    <a href="proceedToCheckOut" class="btn">Proceed to Checkout</a>-->
    <!--                </c:if>-->
    <!--            </c:if>-->
    <!--            <c:if test="${sessionScope.account == null }">-->
    <!--                <p id="note">You need to log in before checking out.</p>-->
    <!--            </c:if>-->
    <!--        </c:if>-->

            <span th:if="( ${session.account} != null ) and ( ${session.cart?.getNumberOfItems()} > 0 )">
                <p th:if="${session.account?.authenticated == true}">

                    <a href="/order/proceedToCheckout" class="dissociated-btn">Proceed to Checkout</a>

                </p>
            </span>
            <span th:if="${session.account} == null">
                <p id="note">You need to log in before checking out.</p>
            </span>


        </div>

        <div id="Separator">&nbsp;</div>
    </div>
</div>
<div th:replace="common/bottom"></div>

</body>
</html>